import React, { useEffect, useState } from 'react'
import { observer, useLocalObservable } from 'mobx-react'
import styles from './index.module.less'
import arrow from '@/resource/jobAbility/arrow.png'
import checked from '@/resource/jobAbility/checked.png'
import jobAbility from '../store'
import { history, useParams } from 'umi'
import PageLoading from '@/components/Global/PageLoading'
import IconFont from '@/components/IconFont'
import EasyModal from '@/components/EasyModal'
import { getCookie, getLocalStorage, getSessionStorage, setSessionStorage } from '@/storage'
import { RightOutline } from 'antd-mobile-icons'
import postMsgRedirect from '@/utils/postMsgRedirect'

export default observer(function Ability() {
    const store = useLocalObservable(() => jobAbility)
    const { id } = useParams<any>()
    const [visible, setVisible] = useState(false)
    const { moduleList, getTestEvalsList, getQuestionInfo } = store

    const identityType = getLocalStorage('IDENTITY_TYPE')

    useEffect(() => {
        getTestEvalsList(id)
        document.title = '职业能力分析测评'
        return () => {
            document.title = ''
        }
    }, [])

    function handleFinish() {
        history.push(`/job/result/${id}`)
    }

    /** 跳转到详情页 */
    function handleClick(data: any) {
        // 未登录并且不是讲师
        if (!getCookie('TOKEN') && Number(identityType) !== 2) {
            postMsgRedirect()
            return
        }
        switch (data.type) {
            case '0':
                history.push('/job/list')
                break
            case '1':
            case '2':
                history.push(`/measurements/${data.id}`)
                break
            case '3':
                history.push(`/job/exam/${data.id}`)
                break
            case '4':
                history.push(`/evaluation/${data.id}`)
                break

            default:
                break
        }
    }

    if (!moduleList) {
        return <PageLoading />
    }

    return (
        <div className={styles.container}>
            <div className={styles.wrapper}>
                <div className={[styles.title_wrapper, Number(identityType) === 2 ? styles.teacher_wrapper : ''].join(' ')}>
                    <div className={styles.title_text}>
                        求职能力测评是结合求职者个人的求职素养和职业化的能力要求，提炼了求职能力测评的基本模型。针对专业知识的基本能力、核心通用能力和发展型能力等三大维度进行的测试，测试结果能比较直观的反馈作为求职者的能力优势和不足，为更好的提升求职能力提供方向。
                    </div>
                    <div className={styles.view_result_btn} onClick={() => handleClick({ type: '0' })}>
                        <IconFont type="icon-icon_sousuo" />
                        查看测评结果
                    </div>
                </div>
                <div className={styles.content_wrapper}>
                    {moduleList?.map(item => {
                        return (
                            <div className={styles.ability_box} key={item.id} onClick={() => handleClick(item)}>
                                <img className={styles.icon} src={item.cover} />
                                <div className={styles.content}>
                                    <div className={styles.title}>
                                        {item.name}
                                        <RightOutline className={styles.right_icon} />
                                    </div>
                                    <div className={styles.sub_content}>{item.detail}</div>
                                </div>
                                {/* <img className={styles.arrow} src={arrow} /> */}
                                {/* {(item.checked || item.userEvalPaper) && (
                                <div className={styles.checked}>
                                    <img src={checked} />
                                    <div>
                                        {item.userEvalPaper ? item.user_finish_status : '已填写'}
                                    </div>
                                </div>
                            )} */}
                            </div>
                        )
                    })}
                </div>
                {/* {moduleList.filter(item => item.checked || item.userEvalPaper).length === 3 && (
                    <div className={styles.finish_btn} onClick={handleFinish}>
                        提交测评
                    </div>
                )} */}
            </div>
            <EasyModal
                visible={visible}
                title="提示"
                okText="确认"
                content={`需先完成职业测评，查看报告结果后再来填写。`}
                onClose={() => setVisible(false)}
                onOk={() => {
                    setVisible(false)
                }}
                showClose
            />
        </div>
    )
})
